<template>
	<div>
		<u-navbar autoBack placeholder title="新的朋友"></u-navbar>
		<div class="list" v-for="(item,index) in newList" :key="index">
			<Avatar useSkeletonAnimation :url="item.avatar" size="50px" />
			<div class="content ">
				<div class="left">
					<div class="name">{{ item.nick||item.userID }}</div>
					<div class="id">账号:{{item.userID}}</div>
				</div>
				<div class="tips" v-if="item.type==='Pendency_Type_SendOut'">等待验证</div>
				<div v-else class="btn" @click="agreementFriend(item)">添加好友</div>

			</div>
		</div>
		<div class="empty" v-if="!newList.length">
			<u-empty :icon="empty" text="暂无新朋友请求"></u-empty>
		</div>
	</div>
</template>
<script setup lang="ts">
	import { ref, computed, onMounted, onUnmounted } from "../../../adapter-vue";
	import { onHide, onShow,onUnload } from "@dcloudio/uni-app"; // 该方法只能用在父组件内，子组件内不生效
	import {
		TUIStore,
		StoreName,
		FriendApplication,
		TUIFriendService
	} from "@tencentcloud/chat-uikit-engine";
	import Avatar from "../../common/Avatar/index.vue";
	import empty from "../../../assets/icon/empty.png";
	import { checkUserInfo } from "../../../utils/checkLogin";
	const newList = ref<any>([])
	function onFriendApplicationListUpdated(friendApplicationList : Array<FriendApplication>) {
		console.log(friendApplicationList, "friendApplicationList")
		newList.value = friendApplicationList;
		let currentContactInfo = friendApplicationList?.find(
			(item : any) =>
				item?.userID && item?.userID === currentContactInfo?.value?.userID
		);
		TUIStore.update(StoreName.CUSTOM, "currentContactInfo", currentContactInfo);
	}
	//同意添加好友
	const agreementFriend = (data) => {
		let parmas = {
			userID: data.userID,
			type: "TencentCloudChat.TYPES.SNS_APPLICATION_AGREE_AND_ADD"
		}
		// 同意添加好友
		TUIFriendService.acceptFriendApplication(parmas).then(res => {
			uni.showToast({
				icon: 'success',
				title: '添加好友成功'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		}).catch(function (imError) {
			uni.hideLoading();
			// console.warn('acceptFriendApplication error:', imError);
		});
	}
	onShow(() => {
		TUIStore.watch(StoreName.FRIEND, {
			friendApplicationList: onFriendApplicationListUpdated,
		});
		TUIStore.watch(StoreName.CUSTOM, {
			IMuserInfo: (data : any) => {
				if (data) {
					checkUserInfo()
				}
			}
		})


	});

	onUnload(() => {
		TUIStore.unwatch(StoreName.FRIEND, {
			friendApplicationList: onFriendApplicationListUpdated,
		});
	});
</script>

<style lang="scss">
	uni-page-body,
	html,
	body,
	page {
		background: #fff;
	}

	.list {
		padding: 0 30rpx;
		display: flex;
		align-items: center;

		.content {
			padding: 24rpx 0;
			margin-left: 26rpx;
			border-bottom: 1px solid #ececee;
			width: 80%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				width: 70%;

				.name {
					width: 100%;
					font-size: 32rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.id {
					color: #999;
					font-size: 24rpx;
					margin-top: 8rpx;
				}
			}

			.btn {
				color: #ff0012;
				border: 1px solid #ff0012;
				padding: 4rpx 12rpx;
				border-radius: 30rpx;
			}

			.gray {
				color: #ff0012;
			}


		}
	}

	.empty {
		margin-top: 20rpx;
	}

	.tips {
		color: #999;
	}
</style>